@import './variable.less';


// ---------------------------------------------------  弹性布局  -------------------------------------------------------


.flex{
	display: flex !important;
}
.flex-col{
	flex-direction: column !important;
}
.flex-warp{
	flex-wrap: wrap !important;
}
.flex-space-around{
	justify-content: space-around !important;
}
.flex-space-between{
	justify-content: space-between !important;
}
.flex-space-evenly{
	justify-content: space-evenly !important;
}
.flex-center{
	justify-content: center !important;
}
.flex-end{
	justify-content: end !important;
}
.flex-start{
	justify-content: start !important;
}
.items-center{
	align-items: center !important;
}
.item-flex-start{
	align-items: flex-start !important;
}
.item-flex-end{
	align-items: flex-end !important;
}
.cursor-pointer{
	cursor: pointer !important;
}

// ---------------------------------------------------  图片  -------------------------------------------------------

.img-responsive {
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
}

.left-icon{
	width: 34px !important;
	height: 34px !important;
}

.img-search{
	width: @var-40 + 2 !important;
	height: @var-40 - 2 !important;
}
.img-44{
	width: @var-40 + 4 !important;
	height: @var-40 + 4 !important;
}

.img-80{
	width: @var-80 !important;
	height: @var-80 !important;
}

.img-100{
	width: @var-80 + 20  !important;
	height: @var-80 + 20 !important;
}

.img-30{
	width: @var-30 * 2 !important;
	height:  @var-30 * 2 !important;
}

.img-45{
	width: @var-30 + 15 !important;
	height:  @var-30 + 15 !important;
}

.img-32{
	width: @var-30 + 2 !important;
	height:  @var-30 + 2 !important;
}

.img-130{
	width: 130px;
	height: 76px;
}


.img-36{
	width: @var-30 * 2 !important;
	height:  @var-30 * 2 !important;
}

// ---------------------------------------------------  宽度高度100%  -------------------------------------------------------


.w-full{
	width: @var-full !important;
}
.h-full{
	height: @var-full !important;
}


// ---------------------------------------------------  字体颜色  -------------------------------------------------------


.font-fff{
	color: @color-fff !important;
}
.font-707070{
	color: @color-707070 !important;
}
.font-9B9B9B{
	color: @color-9B9B9B !important;
}
.font-000{
	color: @color-000 !important;
}
.font-4a4a4a{
	color: @color-4a4a4a !important;
}
.font-29ABE2{
	color: @color-29ABE2 !important;
}

.font-FF4444{
	color: @color-FF4444 !important;
}
.font-9B9B9B{
	color: @color-9B9B9B
}
.font-CBCBCB{
	color: @color-CBCBCB;
}
.font-1092CA{
	color: @color-1092CA;
}

// ---------------------------------------------------  字体大小  -------------------------------------------------------

.font-32px{
	font-size: @font-32px !important;
}

.font-30px{
	font-size: @font-32px - 2 !important;
}

.font-28px{
	font-size: @font-28px !important;
}

.font-26px{
	font-size: @font-28px - 2 !important;
}

.font-24px{
	font-size: @font-24px !important;
}

.font-20px{
	font-size:@var-20 !important;
}

// ---------------------------------------------------  边框  -------------------------------------------------------


.border-E8E8E8-2{
	border: 2px solid @borderColor !important;
}

.border-top-1{
	border-top: 2px  solid @borderColor !important;
	margin-top: @var-40  !important;
}


// ---------------------------------------------------  间距  -------------------------------------------------------

.m-0-auto{
	margin: 0 auto !important;
}

.m-40{
	margin: @var-40 !important;
}
.mt-10{
	margin-top: @var-10 !important;
}

.mt-14{
	margin-top: @var-10 + 4 !important;
}

.mt-20{
	margin-top: @var-20 !important;
}

.mt-40{
	margin-top: @var-40 !important;
}
.mt-160{
	margin-top: @var-40 * 4 !important;
}
.m-0{
	margin: 0 !important;
}
.p-0{
	padding: 0 !important;
}


.ml-10{
	margin-left: @var-10 !important;
}
.ml-40{
	margin-left: @var-40 !important;
}

.mr-10{
	margin-right: @var-10 !important;
}

.mr-20{
	margin-right: @var-20 !important;
}

.mr-30{
	margin-right: @var-30 !important;
}
.mr-40{
	margin-right: @var-40 !important;
}

.mb-40{
	margin-bottom: @var-40 !important;
}
.mb-30{
	margin-bottom: @var-30 !important;
}
.mb-20{
	margin-bottom: @var-20 !important;
}
.mb-10{
	margin-bottom: @var-10 !important;
}

.mb-{
	margin-bottom: 0 !important;
}
.p-5{
	padding: @var-10 / 2 !important;
}
.p-10{
	padding: @var-10 !important;
}
.p-40{
	padding: @var-40 !important;
	box-sizing: border-box !important;
}
.py-40{
	padding: 0 @var-40 !important;
	box-sizing: border-box !important;
}

.py-10{
	padding: 0 @var-10 !important;
	box-sizing: border-box !important;
}

.py-20{
	padding: 0 @var-20 !important;
	box-sizing: border-box !important;
}
.pt-0{
	padding-top: @var-0 !important;
	box-sizing: border-box !important;
}

.pt-10{
	padding-top: @var-10 !important;
	box-sizing: border-box !important;
}
.pb-0{
	padding-bottom: @var-0 !important;
	box-sizing: border-box !important;
}
.pb-40{
	padding-bottom: @var-40 !important;
	box-sizing: border-box !important;
}
.pb-20{
	padding-bottom: @var-20 !important;
	box-sizing: border-box !important;
}
.pt-40{
	padding-top: @var-40 !important;
	box-sizing: border-box !important;
}


// ---------------------------------------------------  弹性盒子的距离  -------------------------------------------------------


.flex-1{
	flex: 1 !important;
}
.flex-2{
	flex: 2 !important;
}
.flex-3{
	flex: 3 !important;
}
.flex-4{
	flex: 4 !important;
}


// ---------------------------------------------------  百分比  -------------------------------------------------------

.w-10per{
	width:@var-10per !important;
}

.w-15per{
	width:@var-15per !important;
}

.w-18per{
	width:@var-18per !important;
}

.w-19per{
	width:@var-19per !important;
}

.w-20per{
	width:@var-20per !important;
}

.w-23per{
	width:@var-23per !important;
}

.w-25per{
	width:@var-25per !important;
}

.w-30per{
	width:@var-30per !important;
}

.w-35per{
	width:@var-35per !important;
}



.w-40per{
	width:@var-40per !important;
}

.w-50per{
	width:@var-50per !important;
}

.w-60per{
	width:@var-60per !important;
}

.w-70per{
	width:@var-70per !important;
}

.w-75per{
	width:@var-75per !important;
}

.w-80per{
	width:@var-80per !important;
}

.w-90per{
	width:@var-90per !important;
}


// ---------------------------------------------------  文字处理  -------------------------------------------------------

//  文字处理
.text-overflow{
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}

.flex-overflow{
	overflow: hidden;  /*也可以用 width:0 代替*/
	flex: 1;   /*关于flex的属性值请看官网，这里相当于 flex-grow */
}

.text-line-clamp-1{
	overflow:hidden !important;  //超出文本隐藏
	text-overflow:ellipsis !important;  ///超出部分省略号显示
	display:-webkit-box !important;  //弹性盒模型
	line-clamp:1 !important;
	-webkit-box-orient:vertical !important;  //上下垂直
	-webkit-line-clamp:1 !important;  //自定义行数
}

.text-line-clamp-2{
	overflow:hidden !important;  //超出文本隐藏
	text-overflow:ellipsis !important;  ///超出部分省略号显示
	display:-webkit-box !important;  //弹性盒模型
	line-clamp:2 !important;
	-webkit-box-orient:vertical !important;  //上下垂直
	-webkit-line-clamp:2 !important;  //自定义行数
}



.text-center{
	text-align: center !important;
}


.text-left{
	text-align: left !important;
}

.font-weight{
	font-weight: bold !important;
}
.font-weight-400{
	font-weight: 400 !important;
}

.text-block{
	display: block !important;
}



//

.displayNone{
	display: none;
}

// 背景颜色
.bg-fff{
	background-color: #fff !important;
}
.bg-1092CA{
	background-color: @color-1092CA;
}

// ---------------------------------------------  定位 ---------------------------------------------------------
.position-relative{
	position: relative;
}
.position-absolute{
	position: absolute
}

.right--16{
	right: -16px;
}
.top--16{
	top: -16px;
}
.left-10{
	left: @var-10;
}


// ---------------------------------------------  边框 ---------------------------------------------------------
.border-bottom{
	border-bottom: @var-2 solid @borderColor !important;
}

.border-top{
	border-top: @var-2 solid @borderColor !important;
}
.border{
	border: @var-2 solid @borderColor !important;;
}

// ---------------------------------------------  颜色的判断 ---------------------------------------------------------


.draft{
	 background: #F7931E !important;
}
.back{
    background-color: #FF4444 !important;
}
.success{
    background-color: #14AF52 !important;
}
	.approval{
			background: @color-F7931E !important;
	}
	.normal{
		background-color: #29ABE2 !important;
	}
